<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:05:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-08 22:21:21
-->
<template>
 <div class="article">
    <!-- 头部 -->
    <Header></Header>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <div class="par_content">
        <div class="content_left">
            <el-menu
              style="width:100%;"
              default-active="2"
              class="el-menu-vertical-demo">
              <el-menu-item index="1" @click="toList()">
                 <i class="el-icon-location"></i>
                 <span slot="title">首页</span>
              </el-menu-item>
              <el-menu-item index="2" @click="toList()">
                <i class="el-icon-menu"></i>
                <span slot="title">公告</span>
              </el-menu-item>
            </el-menu>
        </div>
        <div class="in_content">
          <div class="title">{{articleData.title}}</div>
          <div class="info">
            发布时间:&nbsp;{{articleData.publishTime | fmtDate}}&nbsp;
            作者:&nbsp;{{articleData.baseUser?articleData.baseUser.realname:'匿名'}}&nbsp;
            点击次数:&nbsp;{{articleData.readTimes}}
          </div>
          <div class="cc" v-html="articleData.content"> </div>
        </div>
        </div>     
      </div>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- /底部 -->
  </div>
</template>

<script>
import {get} from '../utils/request'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
  components:{
    Header,
    Footer
  },
  data(){
    return {
      id:0,
      articleData:[]
    }
  },
  created(){
    this.id = this.$route.query.id;
    this.loadArticleData();
  },
  methods:{
    loadArticleData() {
      let url = '/index/article/findById'
      get(url,{id:this.id}).then(resp => {
        this.articleData = resp.data;
      })
    },
      toList() {
        this.$router.push({
          path: '/home'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
// 变量
$color_primary:#028b39;
.article {
  .content{
    // background-color: #44728e;
    background-color: #385284;
    padding: 1em 0;
    text-align: center;
    .wrapper{
      width: 80%;
      .par_content{
      display: flex;
      flex-wrap: nowrap;
      flex-direction: row;
      & > div{
        background-color: #fff;
        border-radius: 5px;
        padding: 1em .5em;
        margin-right: 1em;
      }
      .content_left{
        flex-basis: 200px;
        height: 112px;
        padding: 0;
        position: sticky;
        position: -webkit-sticky;
        top: 10px;
        .el-menu-vertical-demo{
          border-radius: 5px;
        }
      }
      .in_content{
        flex: 1;
        min-height: 700px;
        & > div{
          text-align: center;
        }
        .title{
          font-size: 20px;
          font-weight: bold;
          margin-bottom: .5em;
        }
        .info{
          border-radius: 3px;
          margin-top: 2em;
          border: 1px solid #cccccc;
          background-color: #f0f0f0;
          color: #444444;
          font-size: 16px;
          height: 25px;
          width: 600px;
          margin: 0 auto;
        }
      }
    }
    }
  }
}
</style>
